<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item label="资产编号">
        <el-input v-model="listQuery.zcNumber" placeholder="请输入资产编号" clearable />
      </el-form-item>
      <el-form-item label="资产名称">
        <el-input v-model="listQuery.zcName" placeholder="请输入资产名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleFilter">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 资产表格（添加滚动配置） -->
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%; overflow-y: scroll;"
        max-height="calc(100vh)"
      :header-cell-style="{ 'background-color': '#f5f7fa' }"
      >
      <el-table-column label="序号" type="index" width="50" align="center" />
      <el-table-column label="资产编号" prop="zcNumber" align="center" min-width="120" />
      <el-table-column label="资产名称" prop="zcName" align="center" min-width="150" />
      <el-table-column label="资产标签" prop="zcLabel" align="center" min-width="120" />
      <el-table-column label="所在地点" prop="address" align="center" min-width="150" />
      <el-table-column label="资产性质" prop="zcNature" align="center" min-width="120" />
      <el-table-column label="资产用途" prop="zcPurpose" align="center" min-width="120" />
      <el-table-column label="资产来源" prop="zcSource" align="center" min-width="120" />
      <!-- 如果有更多列，添加在这里 -->
      </el-table>
    </div>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-top: 20px;"
    >
    </el-pagination>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'zcglInfoReport',
  data() {
    return {
      list: [], // 表格数据
      total: 0, // 总条数
      listLoading: false, // 加载状态
      listQuery: {
        currentPage: 1, // 当前页
        pageSize: 20, // 每页条数
        zcNumber: undefined, // 资产编号查询条件
        zcName: undefined, // 资产名称查询条件
        keyword: '', // 通用关键词查询
        dataType: 0, // 数据类型
        menuId: '' // 菜单ID
      },
      expandObj: {} // 扩展数据对象
    }
  },
  created() {
    this.listQuery.menuId = this.$route.query.menuId || ''
    this.initData()
  },
  methods: {
    /**
     * 加载表格数据
     */
    initData() {
      this.listLoading = true
      const queryParams = {
        ...this.listQuery,
        offset: (this.listQuery.page - 1) * this.listQuery.limit
      }

      request({
        url: `/api/example/ZcglZcdjInfo/zcReport`,
        method: 'post',
        data: queryParams
      }).then(res => {
        if (res.code === 200 && res.data) {
          this.list = res.data.list.map(item => ({ ...item, ...this.expandObj }))
          this.total = (res.data.pagination && res.data.pagination.total) || 0
        } else {
          this.list = []
          this.total = 0
          this.$message.warning('获取数据失败')
        }
        this.listLoading = false
      }).catch(error => {
        console.error('数据请求失败:', error)
        this.list = []
        this.total = 0
        this.listLoading = false
        this.$message.error('网络异常，请重试')
      })
    },

    handleFilter() {
      this.listQuery.page = 1
      this.initData()
    },

    resetQuery() {
      this.listQuery = {
        ...this.listQuery,
        page: 1,
        limit: 20,
        zcNumber: undefined,
        zcName: undefined,
        keyword: '',
        dataType: 0
      }
      this.initData()
    },

    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.listQuery.currentPage = 1
      this.initData()
    },

    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.initData()
    }
  }
}
</script>

<style scoped>
.app-container {
  overflow-y: scroll;
  padding: 20px;
  box-sizing: border-box; /* 确保padding不会撑开容器 */
}

.demo-form-inline {
  margin-bottom: 20px;
}

/* 表格容器样式 */
.table-container {
  width: 100%;
  overflow: auto; /* 当表格宽度超出容器时显示横向滚动条 */
  margin-top: 20px;
  border: 1px solid #e8e8e8; /* 边框与表格呼应 */
  border-radius: 4px; /* 轻微圆角 */
}

/* 解决表格内容过长导致的显示问题 */
::v-deep .el-table th > .cell {
  white-space: nowrap; /* 表头不换行 */
}

::v-deep .el-table td > .cell {
  white-space: normal; /* 单元格内容自动换行 */
  word-break: break-all; /* 单词截断 */
  line-height: 1.5; /* 行高适中 */
}
</style>
